<?php $this->headScript()
->appendFile($this->js('plugins/jquery.cookies.min.js'))
->captureStart()?>

	$(document).ready(function(){
	count_student();
	$.cookies.setOptions({path:'<?php echo $this->baseUrl()?>/student'})
	$("#year_semester").change(function(){
		$.cookies.set("Student_year_semester", $("#year_semester").val());
		$.cookies.set("Student_class_id", $("#class_id").val());
		$.cookies.del("Student_Sn");
		$("#selForm").submit();
	});
	$("#class_id").change(function(){
		$.cookies.set("Student_year_semester", $("#year_semester").val());
		$.cookies.set("Student_class_id", $("#class_id").val());
		 $.cookies.del("Student_Sn");
		$("#selForm").submit();
	});

	$(".msg_body.hide").hide();
	$(".msg_head").live('click',function(){
		$(this).next(".msg_body").slideToggle(250);
	});

	});

	function setStudent(){
		var sn =$("#student_sn").val();
		if (!sn){
			sn = $.cookies.get("Student_Sn");
			if (sn) {
				$("#student_sn").val(sn);
			}
			else {
				$("#student_sn option:first").attr('selected','selected');
				sn =$("#student_sn").val();
			}
		}
		return sn
	}

	function count_student(){
       // count student
       var boys = ($(".option_boy").length);
       var girls = ($(".option_girl").length);
       var count_all = boys+girls;
       $("#Count_boy").html(boys);
       $("#Count_girl").html(girls);
       $("#Count_all").html(count_all);

      $("#student_sn option:even").addClass('select_even');
	}
<?php $this->headScript()->captureEnd()?>
<?php $this->headStyle()->captureStart()?>
.option_boy{color:blue;}
.option_girl{color:red;}
.leftArea , .rightArea{float:left;margin:5px}
.leftArea {text-align:center;}

.msg_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	background-color:#FFCCCC;
	margin:1px;
}
.msg_body {
	padding: 5px 10px 15px;
	background-color:#F4F4F8;
}
.addr_item{float:left; border:dotted #ccc 1px;margin:3px;padding:2px;}
#Count_student{margin:5px}
.select_even {background:#ffc; border:dotted 1px #ccc;}
.checked{background: #ff0}
#save-button {margin:5px;width:70x}
#photo {text-align:center;}
#photo img {border:solid #ccc 1px;padding:3px;margin:3px}

<?php $this->headStyle()->captureEnd()?>
<div class="ui-widget ui-widget-content ui-corner-all"  style="padding:3px">
<form action=""  method="post" id="selForm" >
<select name="year_semester" id="year_semester">
<?php echo $this->YearSemesterOptions($this->year_semester)?>
</select>
<br/>
<select name="class_id" id="class_id">
<?php echo $this->ClassNameOptions($this->year_semester,$this->class_id)?>
</select>
<br/>
<select name="student_sn" id="student_sn" size="15">
<?php echo $this->StudentNameOptions($this->year_semester,$this->class_id)?>
</select>
<div id="Count_student">
<img src="<?php echo $this->baseUrl?>/images/boy.png" /><span id="Count_boy"></span>
<img src="<?php echo $this->baseUrl?>/images/girl.png" /> <span id="Count_girl"></span>
<img src="<?php echo $this->baseUrl?>/images/Clients.png"/><span id="Count_all"></span>
</div>
</form>
</div>